<template>
  <div>
    <Breadcrumb :style="{margin: '24px 20px'}">
      <BreadcrumbItem>用户测量数据</BreadcrumbItem>
      <BreadcrumbItem>围度预测模块</BreadcrumbItem>
    </Breadcrumb>
    <Card :style="{padding: '24px', minHeight: '680px', minWidth: '800px', background: '#fff', marginLeft: '20px'}">
      <!-- <Button class="predict-btn" @click="getPredictData">预测获取围度信息</Button> -->
      <Table border :data="tableData1">
        <TableColumn
            prop="date"
            label="测量时间"
            width='150'>
          </TableColumn>
          <TableColumn
            prop="cwidth"
            label="胸宽"
            width='150'>
          </TableColumn>
          <TableColumn
            prop="cthickness"
            label="胸厚"
            width='150'>
          </TableColumn>
          <TableColumn
            prop="wwidth"
            label="腰宽"
            width='150'>
          </TableColumn>
          <TableColumn
            prop="wthickness"
            label="腰厚"
            width='150'>
          </TableColumn>
          <TableColumn
            prop="hwidth"
            label="臀宽"
            width='150'>
          </TableColumn>
          <TableColumn
            prop="hthickness"
            label="臀厚"
            width='150'>
          </TableColumn>
          <TableColumn
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <Button @click="handleClick(scope.row)" type="text" size="small">预测</Button>
            </template>
          </TableColumn>
        </Table>
        <Dialog title="围度预测" :visible.sync="dialogFormVisible">
          <Form :model="form">
            <Row :gutter="20">
              <Col :span="8">
                <FormItem label="胸宽" :label-width="formLabelWidth">
                  <Input v-model="form.cwidth" autocomplete="off"></Input>
                </FormItem>
              </Col>
              <Col :span="8">
                <FormItem label="胸厚" :label-width="formLabelWidth">
                  <Input v-model="form.cthickness" autocomplete="off"></Input>
                </FormItem>
              </Col>
              <Col :span="8">
                胸围：
              </Col>
            </Row>
            <Row :gutter="20">
              <Col :span="8">
                <FormItem label="腰宽" :label-width="formLabelWidth">
                  <Input v-model="form.wwidth" autocomplete="off"></Input>
                </FormItem>
              </Col>
              <Col :span="8">
                <FormItem label="腰厚" :label-width="formLabelWidth">
                  <Input v-model="form.wthickness" autocomplete="off"></Input>
                </FormItem>
              </Col>
              <Col :span="8">
                腰围：
              </Col>
            </Row>
            <Row :gutter="20">
              <Col :span="8">
                <FormItem label="臀宽" :label-width="formLabelWidth">
                  <Input v-model="form.hwidth" autocomplete="off"></Input>
                </FormItem>
              </Col>
              <Col :span="8">
                <FormItem label="臀厚" :label-width="formLabelWidth">
                  <Input v-model="form.hthickness" autocomplete="off"></Input>
                </FormItem>
              </Col>
              <Col :span="8">
                臀围：
              </Col>
            </Row>
          </Form>
          <div slot="footer" class="dialog-footer">
            <Button @click="dialogFormVisible = false">关 闭</Button>
            <Button type="primary" @click="dialogFormVisible = false">预 测</Button>
            <Button type="primary" @click="dialogFormVisible = false">数据上传</Button>
          </div>
        </Dialog>
    </Card>
  </div>
</template>
<script>
export default {
  name: 'twoDData',
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '100',
      form: {

      },
      hasData: true,
      tableData1: [{
        date: '2022-2-10',
        cwidth: '330mm',
        cthickness: '239mm',
        wwidth: '257mm',
        wthickness: '186mm',
        hwidth: '336mm',
        hthickness: '242mm'
      }, {
        date: '2022-2-4',
        cwidth: '350mm',
        cthickness: '248mm',
        wwidth: '287mm',
        wthickness: '200mm',
        hwidth: '357mm',
        hthickness: '265mm'
      }, {
        date: '2022-1-30',
        cwidth: '334mm',
        cthickness: '241mm',
        wwidth: '253mm',
        wthickness: '182mm',
        hwidth: '329mm',
        hthickness: '240mm'
      }]
    }
  },
  methods: {
    handleClick (row) {
      this.form = row
      this.dialogFormVisible = true
    },
    async getPredictData () {
      const res = await this.$http.get('/measure/predict', {
        params: {
          username: 'ljp'
        }
      })
      if (res.code === 200) {
        const newTableData = []
        const measureData = res.data
        const keys = Object.keys(measureData)
        keys.forEach(keyName => {
          const filterItem = this.tableData1.filter(item => {
            return item.type === keyName
          })
          if (filterItem.length > 0) {
            const newItem = filterItem[0]
            newItem.value = measureData[keyName]
            newItem.date = "now" 
            newTableData.push(newItem)
          }
        })
        // console.log(newTableData)
        this.tableData1 = newTableData
        this.hasData = true
      }
    },
    async getTwoDimensionData () {
      const res = await this.$http.get('/measure/getTwoDimension', {
        params: {
          username: 'ljp'
        }
      })
      if (res.code === 200) {
        const newTableData = []
        const measureData = res.data
        const keys = Object.keys(measureData)
        keys.forEach(keyName => {
          const filterItem = this.tableData1.filter(item => {
            return item.type === keyName
          })
          if (filterItem.length > 0) {
            const newItem = filterItem[0]
            newItem.value = measureData[keyName]
            newItem.date = res.dataDate
            newTableData.push(newItem)
          }
        })
        // console.log(newTableData)
        this.tableData1 = newTableData
        return true
      } else {
        return false
      }
    }
  },
  mounted () {
    this.getTwoDimensionData()
  }
}
</script>
<style scoped lang="less">
  .predict-btn {
    margin-bottom: 20px;
  }
</style>
